<template>
  <div class="dataDimenRedu">
    <div class="upchart"></div>
    <div class="downchart"></div>
  </div>
</template>

<script setup>
import echarts from "@/plugins/echarts";
import { EffectScatterChart,ScatterChart } from "echarts/charts";
echarts.use([EffectScatterChart]);
echarts.use([ScatterChart]);
import { ref, onMounted, computed,defineExpose } from "vue";
import { codeDimreduction } from '@/api/dataProcessing'

const fileName = ref("");
const c_way = ref(0);
const d_status = ref("未降维")
const chartYName = ref("")
const fileDataObj = ref('');
const childStatusObj = ref({
  title: '未清洗',
  status: 500
});

const emit = defineEmits(['childTitleStatusClick']);
emit('childTitleStatusClick', childStatusObj.value)

const props = defineProps({
  fileData: {
    type: String,
    default: ''
  },
  fileName: {
    type: String,
    default: ''
  },
  selectValue: {
    type: Object,
    default () {
      return {}
    }
  },
  switchValue: {
    type: Array,
    default() {
      return []
    }
  }
});

fileName.value = props.fileName;
// base64格式转file对象
const base64ToFile = (base64, fileName) => {
  let arr = base64.split(",");
  // let mime = arr[0].match(/:(.\*?);/)[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);

  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], fileName, { type: '' });
}
fileDataObj.value = base64ToFile(props.fileData, props.fileName)

  onMounted(() => {
    getChart();
    getChart1();
  });

  const changeYName = () => {
    if (c_way.value === 0) {
      chartYName.value = "传动机构振动数据"
    }
    else if (c_way.value === 1) {
      chartYName.value = "传动机构振动数据"
    }
  }

let myChart = ref();
function getChart() {
  var chartDom = document.querySelector(".upchart");
  myChart.value = echarts.init(chartDom);
  var option = {
    title: {
      text: "数据降维前",
      textStyle: {
        fontSize: 15 // 设置字号为 14px
      }
    },
    legend: {
      right: "15%",
      data: ["卷曲伺服输出电流", "卷曲伺服输出电压", "送经伺服输出电流", "送经伺服输出电压"],
      icon: "roundRect",
      top: "5%",
      textStyle: {
        fontSize: 14
      }
    },
    tooltip: {
      // trigger: 'axis',
      showDelay: 0,
      formatter: function (params) {
        if (params.value.length > 1) {
          return (
            params.seriesName +
            " :<br/>" +
            params.value +
            " " +
            params.value +
            " "
          );
        } else {
          return (
            params.seriesName +
            " :<br/>" +
            params.name +
            " : " +
            params.value +
            " "
          );
        }
      },
      axisPointer: {
        show: true,
        type: "cross",
        lineStyle: {
          type: "dashed",
          width: 1
        }
      }
    },
    xAxis: {
      type: "category",
    },
    yAxis: {
      name: chartYName.value,
      type: "value",
      nameRotate:0.1,
    },
    series: [
      {
        name: '卷曲伺服输出电流',
        symbolSize: 5,
        data: [[8.07, 6.95],
          [13.0, 7.58]],
        type: "scatter"
      },
      {
        name: '卷曲伺服输出电压',
        symbolSize: 5,
        data: [[10.0, 8.04],
          [8.07, 6.95]],
        type: "scatter"
      },
      {
        name: '送经伺服输出电流',
        symbolSize: 5,
        data: [[12.5, 6.82],
          [9.15, 7.2]],
        type: "scatter"
      },
      {
        name: '送经伺服输出电压',
        symbolSize: 5,
        data: [[10.0, 6.33],
          [14.0, 8.96]],
        type: "scatter"
      }
    ]
  };
  option && myChart.value.setOption(option);
}
let myChart1 = ref();
function getChart1() {
  var chartDom = document.querySelector(".downchart");
  myChart1.value = echarts.init(chartDom);
  var option = {
    title: {
      text: "数据降维后",
      textStyle: {
        fontSize: 15 // 设置字号为 14px
      }
    },
    legend: {
      right: "15%",
      data: ["电压数据", "电流数据"],
      icon: "roundRect",
      top: "5%",
      textStyle: {
        fontSize: 14
      }
    },
    tooltip: {
      // trigger: 'axis',
      showDelay: 0,
      formatter: function (params) {
        if (params.value.length > 1) {
          return (
            params.seriesName +
            " :<br/>" +
            params.value +
            " " +
            params.value +
            " "
          );
        } else {
          return (
            params.seriesName +
            " :<br/>" +
            params.name +
            " : " +
            params.value +
            " "
          );
        }
      },
      axisPointer: {
        show: true,
        type: "cross",
        lineStyle: {
          type: "dashed",
          width: 1
        }
      }
    },
    xAxis: {
      type: "category",
    },
    yAxis: {
      name: chartYName.value,
      type: "value",
      nameRotate:0.1,
    },
    series: [
      {
        name: '电压数据',
        symbolSize: 5,
        data: [[12.2, 7.83],
          [2.02, 4.47]],
        type: "scatter"
      },
      {
        name: '电流数据',
        symbolSize: 5,
        data: [[12.0, 8.84],
          [7.08, 5.82],
          [5.02, 5.68]],
        type: "scatter"
      }
    ]
  };
  option && myChart1.value.setOption(option);
}

  // 开始降维
  const childMethod = () => {
  if (fileDataObj.value) {
      // changeYName()
      d_status.value = '降维中...'
      childStatusObj.value.title = '降维中....';
      emit('childTitleStatusClick', childStatusObj.value)
      let formData = new FormData()
      if (props.switchValue[0].value) {
        formData.append("method", props.selectValue.selectA)
      } else {
        formData.append("file", fileDataObj.value)
      }
      formData.append("strType", props.selectValue.selectB)
      codeDimreduction(formData).then(res => {
        if (res.status === 200) {
          myChart.value.setOption({
            series: [
              {
                data: res.data.curlingServoOutputCurrent
              },
              {
                data: res.data.curlingServoOutputVoltage
              },
              {
                data: res.data.sendingServoOutputCurrent
              },
              {
                data: res.data.sendingServoOutputVoltage
              },
            ]
          });
          myChart1.value.setOption({
            series: [
              {
                data: res.data.oridata
              },
              {
                data: res.data.prodata
              }
            ]
          });
          if ( res.data.prodata.length > 0) {
            childStatusObj.value.title = "降维完成"
            childStatusObj.value.status = res.status;
            emit('childTitleStatusClick', childStatusObj.value)
          }
        } else {
          childStatusObj.value.title = "降维失败"
          childStatusObj.value.status = res.status;
          emit('childTitleStatusClick', childStatusObj.value)
        }
      }).catch(error => {
        childStatusObj.value.title = "降维失败"
        childStatusObj.value.status = error.status;
        emit('childTitleStatusClick', childStatusObj.value)
        console.log(error)
      });
    }
  }
  defineExpose({
    childMethod
  })
  //计算属性
  const tagType = computed(() => {
    if (d_status.value ==='未降维') {
      return 'danger'
    } else if (d_status.value ==='降维完成') {
      return 'success'
    }
  })
</script>

<style lang="scss" scoped>
.dataDimenRedu {

  .upchart {
    width: 100%;
    height: 260px;
  }

  .downchart {
    width: 100%;
    height: 260px;
  }
}
</style>
